<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
 
    <link rel='stylesheet' href='css/style.css'>
    <link rel='stylesheet' href='css/swiper.min.css'>  
	  
    <script src="js/jquery.1.11.1.js"></script>
    <script src="js/iscroll.js"></script>
    <script src="js/swiper.min.js"></script>  
    <script src="js/idangerous.swiper.min.js"></script> 
	
    <title>优惠促销</title>
</head>
<body>
    <!-- header -->
    <header class="favor-header-bar" style="padding: 0;">
      <div id="wrapper" style="height: 100%;">
        <ul class="tabs" style="height: 100%;">
            <li class="default"><a href="javascript:void(0);" id="btn1" hidefocus="true">热门</a><span><img src="images/hot.png"></span></li>
            <li><a href="javascript:void(0);" id="btn2" hidefocus="true">宽带</a></li>
            <li><a href="javascript:void(0);" id="btn3" hidefocus="true">宽带2</a></li>
            <li><a href="javascript:void(0);" id="btn4" hidefocus="true">流量</a></li>
            <li><a href="javascript:void(0);" id="btn5" hidefocus="true">充值</a></li>
            <li><a href="javascript:void(0);" id="btn6" hidefocus="true">充值11</a></li>
        </ul>
      </div>
    </header>
   <!-- slideTo tab -->
   <div class="swiper-container favor-list">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                            <span></span>
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic3-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic1-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
            </div>
            <div class="swiper-slide margin19">
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic3-favor.png">
                            <span></span>
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic3-favor.png">
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic3-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic3-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
            </div>
            <div class="swiper-slide">
               <div class="nofavor">
                    <img src="images/panda.png">
               </div>                                
            </div>
            <div class="swiper-slide">
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                            <span></span>
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic3-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic1-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>    
            </div>
            <div class="swiper-slide">
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                            <span></span>
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt>
                            <img src="images/pic1-favor.png">
                        </dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic3-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕我们嗨起来自己都害怕我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>                    
                </a>
                <a href="">
                    <dl>
                        <dt><img src="images/pic1-favor.png"></dt>
                        <dd>
                            <h2>1G流量免费送</h2>
                            <p>我们嗨起来自己都害怕</p>
                            <small>活动截止到2016-07-01</small>
                        </dd>
                    </dl>
                </a>    
            </div>
        </div>
   </div>
   <script>
    var myScroll = new IScroll('#wrapper',{
        /*设置水平滑动，不允许垂直滑动*/
        scrollX: true, scrollY: false
    });

    var mySwiper = new Swiper('.swiper-container',{
        autoHeight: true,
        onSlideChangeStart: function(){
          $(".tabs .default").removeClass('default');
          $(".tabs li").eq(mySwiper.activeIndex).addClass('default');
        }
    });
     $(".tabs li").on('click',function(e){
         //阻止事件的默认行为
        e.preventDefault();
        $(".tabs .default").removeClass('default');
        $(this).addClass('default');
        mySwiper.swipeTo($(this).index());
      });
      $(".tabs li").click(function(e){
        e.preventDefault();
      });
     
     //动态赋值ul长度
     var totalWidth = 0;   //默认ul长度
     $('.tabs').find("li").each(function(index,value){
         //获取总的li长度
         totalWidth += $(value).innerWidth();
         console.log(totalWidth)
     })
     //赋值ul的总长度 
     $('.tabs').width(totalWidth);
    </script>
</body>
</html>

